<template>
	<div class="index">
    <div style="padding: 0rem 0rem; position: relative; background: #1989fa; height: 0.9rem;" class="flexcc">
    	<div style="position: absolute; left: 0.3rem; top: 0rem; height: 100%;" class="flexc"><van-icon name="arrow-left" size="0.3rem" style="font-weight: bold;" @click="back()" color="#fff" /></div>
    	<div style="color: #fff;  font-weight: bold;">联系人</div>
    </div>
    <div style="padding: 0.3rem;">

      <div style="margin-bottom: 0.3rem;" class="flexbc">
        <van-search style="padding: 0; width: 5rem;"
          v-model="all2.khmc"
          placeholder="请输入客户名称"
          @search="getlist()"
        >
        </van-search>
        <div class="flexc" @click="log1 = true"><van-icon name="filter-o" style="margin-right: 0.1rem;" size="20px" />高级搜索</div>
      </div>

      <div class="yy" v-for="(item,index) in list" :key="index" style="margin-bottom: 0.2rem;" @click="go('/lianxiren/xiangqing',item.id)">
        <div class="flexbc" style="border-bottom: 1px dashed #ddd; padding-bottom: 0.2rem;">
          <div style="font-weight: bold; font-size: 0.3rem;">{{item.khmc}}</div>
          <div  v-if="person.title == '销售内勤'"><van-icon name="edit" color="#259b24" size="0.35rem" style=" font-weight: bold;" /></div>
        </div>

    		<div class="flex" style="padding-top: 0.2rem;">
    			<div style="flex: 1; overflow: hidden; " class="flexc">
            <div>
              <div style="font-size: 0.3rem; margin-bottom: 0.2rem;">{{item.xm}}</div>
              <div>{{item.bm}}/{{item.zw}}</div>
            </div>
    			</div>
    			<div style="flex: 1; overflow: hidden;">
    				<div class="flexc" style="margin-bottom: 0.2rem;"><van-icon name="phone-o" style="margin-right: 0.1rem;" />{{item.dh}}</div>
            <div class="flexc" style="margin-bottom: 0.2rem;"><van-icon name="envelop-o" style="margin-right: 0.1rem;" />{{item.yx}}</div>
            <div class="flexc" style="margin-bottom: 0.1rem;"><van-icon name="location-o" style="margin-right: 0.1rem;" />{{item.dz}}</div>
    			</div>

    		</div>
    	</div>

    	<div class="flexcc">
    		<div><van-icon name="add-o" size="0.35rem" style="  margin-right: 0.1rem;" /></div>
    		<div @click="go('/lianxiren/xinjiankehu')">点击添加联系人</div>
    	</div>



    </div>

    <van-popup v-model="tuihuilog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户退回至公海客户？</div>
    			<div>转移成功后，此客户数据将属于公共资源，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>
    <van-popup v-model="shanchulog" position="center">
    	<div style="border: 1px #CCCCCC solid; padding: 0.2rem; width: 6rem;">
    		<div style="padding-bottom: 0.2rem; border-bottom: 1px #ccc solid; font-size: 0.3rem; text-align: center; font-weight: bold;">退回至公海客户</div>

    		<div style="padding: 0.3rem 0; color: #666;">
    			<div>是否确定将所选客户删除？</div>
    			<div>删除成功后，原负责人不能再维护跟进和更新此客户数据。</div>
    		</div>

    		<div class="flexcc">
    			<van-button type="default" size="small" style="margin-right: 0.6rem;">取消</van-button>
    			<van-button type="info" size="small" >确认</van-button>
    		</div>
    	</div>
    </van-popup>

    <van-popup v-model="log1" position="bottom">

      <div style="padding: 0.3rem;">

        <div style="margin-bottom: 0.1rem;">被拜访人姓名：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <van-field v-model="all.khmc" placeholder="请输入被拜访人姓名" />
        </div>

        <div style="margin-bottom: 0.1rem;">客户类型：</div>
        <div style="margin-bottom: 0.2rem; flex-wrap: wrap;" class="flexc">
          <div @click="changekhlx(item)" class="lact" :class="all.khlx == item?'lactli':''" v-for="item in genjinzhuangtai" :key="item">{{item}}</div>
        </div>

        <div style="margin-bottom: 0.1rem;">创建时间：</div>
        <div style="margin-bottom: 0.2rem;" class="flexc">
          <van-field readonly v-model="all.cjsjStart" style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-right: 0.1rem;" size="small" placeholder="请选择开始时间" @click="shijianlog1 = true" />-
          <van-field readonly v-model="all.cjsjEnd"  style="border: 1px #ddd solid; width: 3rem; padding: 5px 16px; margin-left: 0.1rem;" size="small" placeholder="请选择结束时间" @click="shijianlog2 = true" />
        </div>

        <div class="flexcc">
        	<van-button type="default" size="small" style="margin-right: 0.6rem; padding: 0rem 0.5rem;" @click="chongzhi">重置</van-button>
        	<van-button type="info" size="small" style="padding: 0rem 0.5rem;" @click="search2">确认</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="shijianlog1" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjStart" type="date" title="选择时间" @confirm="shijianConfirm1" @cancel="shijianCancel1" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog2" position="bottom" >
    	<van-datetime-picker v-model="all.cjsjEnd" type="date" title="选择时间" @confirm="shijianConfirm2" @cancel="shijianCancel2" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog3" position="bottom" >
    	<van-datetime-picker v-model="all.yjtjsjStart" type="date" title="选择时间" @confirm="shijianConfirm3" @cancel="shijianCancel3" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>
    <van-popup v-model="shijianlog4" position="bottom" >
    	<van-datetime-picker v-model="all.yjtjsjEnd" type="date" title="选择时间" @confirm="shijianConfirm4" @cancel="shijianCancel4" :min-date="minDate" :max-date="maxDate"  />
    </van-popup>

	</div>
</template>

<script>
  var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;
	export default {
		name: 'kehulist',
		data() {
			return {
        act:3,
        tuihuilog:false,
        shanchulog:false,
        list:[],
        all2:{
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          khmc:""
        },
        all:{
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          khmc:"",
          khlx:"",
          cjsjStart:"",
          cjsjEnd:""
        },
        log1:false,
        shijianlog1:false,
        shijianlog2:false,
        genjinzhuangtai:['重要客户','普通客户','低价值客户'],
        person:JSON.parse(localStorage.getItem('person'))

			}
		},
		created() {
      this.getlist()
		},
		mounted() {

		},
		methods: {
      chongzhi:function(){
        this.all = {
          fzrid:JSON.parse(localStorage.getItem('person')).userid,
          khmc:"",
          khlx:"",
          cjsjStart:"",
          cjsjEnd:""
        }
      },
      search2:function(){
        axios.get('/Contact/queryContactListByCon',{params:this.all}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
            this.log1 = false
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },
      changekhlx:function(item){
        this.all.khlx = item
      },

      getlist:function(){
        axios.get('/Contact/queryContactList',{params:this.all2}).then((response)=>{
        	if (response.data.state == 200) {
            this.list = response.data.data
        	} else {
            vant.Toast(response.data.msg);
        	}
        })
      },

      sexConfirm:function(val){

      	this.sex.xuanzhong = val
      	console.log(this.sex.xuanzhong)
      	this.sex.log = false
      },
      sexCancel:function(val){
      	console.log(val)
      },
      sexChange:function(val){
      	console.log(val)
      },
      shijianConfirm1:function(val){
        this.all.cjsjStart =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog1 = false
      },
      shijianConfirm2:function(val){
        this.all.cjsjEnd =  moment(val).format('YYYY-MM-DD')
      	this.shijianlog2 = false
      },
      shijianCancel1:function(val){
        this.shijianlog1 = false
      },
      shijianCancel2:function(val){
        this.shijianlog2 = false
      },

		}
	}
</script>


<style scoped >
    .lact{ padding: 0.1rem 0.3rem; background: #fff; margin-right: 0.2rem; border-radius: 4px; border: 1px #ddd solid; margin-bottom: 0.2rem;}
    .lactli { background: #1989fa !important; color: #fff !important;  border: 1px #1989fa solid !important;}

    .yy {
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.2rem 0.3rem;
      margin-bottom: 0.3rem;
    }

    .act {
      background: #ccc !important;
      color: #FFFFFF;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
    }

    .act1 {
      background: #fff;
      box-shadow: 0 0 0.1rem #eaeaea;
      padding: 0.1rem 0.2rem;
      margin-left: 0.2rem;
      border-radius: 0.1rem;
    }

</style>
